<!DOCTYPE html>
<html lang="en" xmlns:th=http://www.thymeleaf.org>
<head>
    <meta charset="UTF-8">
    <title>加密解密</title>
</head>

<script type="text/javascript" src="http://localhost:4001/jquery-3.3.1.min.js"></script>
<script>

    function encode(type) {
        var data = $("#before").val();
        $.ajax({
            type: 'POST',
            url: "./" + type,
            data: data,
            success:function (result) {
                $("#after").val(result)
            }
        })
    }

</script>
<body>
<table>
    <tr>
        <td>加密(或解密)字符串:</td>
        <td><input name="before" id="before" value="" style="width: 500px"> </td>
    </tr>
    <tr>
        <td>处理后的字符串:</td>
        <td><input type="after" id="after" value="" style="width: 500px"> </td>
    </tr>
    <tr>
        <td></td>
        <td align="right">
            <input type="button" value="加密" onclick="encode('encrypt')" />
            <input type="button" value="解密" onclick="encode('decrypt')" />
        </td>
    </tr>
</table>
</body>
</html>